<template>
    <ul class="time-line col-lg-12 p-0">
        <li class="display-inline time-line-item" v-for="item in items" :key="item.id">
            <router-link class="time-line-post-format a-no-t" :to="item.iconLink">
                <i class="fa" :class="item.icon"></i>
            </router-link>
            <div class="time-line-block">
                <img :src="item.img" width="100%"/>
                <h4>{{item.title}}</h4>
                <div class="icon-list text-muted">
                    <div class="display-inline">
                        <i class="fa fa-clock-o p-r-5"></i>
                        <a href="#" class="a-no-t text-muted">{{item.date}} </a>
                    </div>
                    <div class="display-inline">
                        <i class="fa fa-folder-o p-r-5"></i>
                        <a href="#" class="a-no-t text-muted">{{item.category}}</a>
                    </div>
                    <div class="display-inline">
                        <i class="fa fa-comment-o p-r-5"></i>
                        <a href="#" class="a-no-t text-muted">{{item.common}}</a>
                    </div>
                </div>
                <p>{{item.dis}}</p>
                <router-link class="a-no-t" :to="item.link">
                    <i class="fa fa-arrow-right">&nbsp;&nbsp;</i>
                    Read More
                </router-link>
            </div>
        </li>
    </ul>
</template>

<script>
    export default {
    	name: 'TimeLine',
        props: {
            items: {type: Array}
        }
    };
</script>

<style>
    @import "../../sass/custom/_timeline.scss";
</style>
